<script setup>
import * as Cesium from 'cesium'
import {onMounted, ref, reactive, useTemplateRef} from "vue";
import initMap from "@/utils/initMap.js";
import logo from '@/assets/vue.svg'



import {useSetting} from "@/store/setting";
import {ElMessage} from 'element-plus'


Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjg4ZjljZC1mZGM3LTRlZjEtYjg3MC00MjZkNGU3YjI5ZWUiLCJpZCI6MTU5NTIsImlhdCI6MTYwNTE0ODM5OX0.LjxeKrgAo7Ksk8405kSAhYwF0nKcF2w2DGJnKHh51N8';


const setting = useSetting()
let numPoints = setting.primitiveCount;

function moveAmountRandom() {
    const min = setting.moveRandomMin;
    const max = setting.moveRandomMax;
    const x = Cesium.Math.randomBetween(min, max);
    const y = Cesium.Math.randomBetween(min, max);
    const z = Cesium.Math.randomBetween(min, max);
    return new Cesium.Cartesian3(x, y, z);
}

 
let mountedViewer = null
const cesium_container = useTemplateRef('cesium_container')
const renderSourceData = new Cesium.CustomDataSource('render_source_data');

onMounted(() => {
    const viewer = initMap(cesium_container.value);
    mountedViewer = viewer
    const {scene} = viewer;

    viewer.dataSources.add(renderSourceData)

    getEntity(renderSourceData,scene)

    new Cesium.ScreenSpaceEventHandler(scene.canvas).setInputAction(function (event) {
        // const pick = viewer.camera.pickEllipsoid(e.position);
        // console.log(pick)
        const {position} = event;
        const pick = viewer.scene.pick(position)
        if(pick){
            console.log('拾取信息：',pick)
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
})


function getEntity(dataSource,scene){
    scene.preUpdate.removeEventListener(animatePoints)
    for (let i = 0;i<numPoints;i++){
        const base = scene.globe.ellipsoid.radii.x;
        const position = new Cesium.Cartesian3(
          16000000 * Math.random() - 8000000,
          -((4000000 * i) / numPoints + base),
          2000000 * Math.random() - 1000000
        );
        dataSource.entities.add({
            position,
            id:(i+1).toString(),
            point:{
                pixelSize: 5,
                color: Cesium.Color.RED,
            },
            label:{
                text: String(i + 1),
                font: '8px',
                fillColor: Cesium.Color.SKYBLUE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(0, 12),
            },
            billboard:{
                image: logo,
                scale: 0.5,
            }

        })
    }
    scene.preUpdate.addEventListener(animatePoints)
}

const positionScratch = new Cesium.Cartesian3();

function animatePoints() {

    // const {scene} = mountedViewer;
  for (let i = 0;i<numPoints;i+=Number(setting.updateIntervalCount)){
      const entity = renderSourceData.entities.getById((i+1).toString())
      Cesium.Cartesian3.add(entity.position.getValue(mountedViewer.clock.currentTime), moveAmountRandom(), positionScratch);

      entity.position = positionScratch;
  }

}


const drawer = ref(false)
const form = reactive({
    primitiveCount: 0,
    isShowPoint: true,
    isShowLabel: true,
    isShowBillboard: true,
    updateIntervalCount: 1,
    moveRandomMin: 0,
    moveRandomMax: 100,
    isShowFxaa: true,
})

function handleOpenSetting() {
    form.primitiveCount = setting.primitiveCount;
    form.isShowPoint = setting.isShowPoint;
    form.isShowLabel = setting.isShowLabel;
    form.isShowBillboard = setting.isShowBillboard;
    form.updateIntervalCount = setting.updateIntervalCount;
    form.moveRandomMax = setting.moveRandomMax
    form.moveRandomMin = setting.moveRandomMin;
    form.isShowFxaa = setting.isShowFxaa
    drawer.value = true
}


// function handleUpdateSetting() {
//     setting.updatePrimitiveCount(form.primitiveCount)
//     setting.updateIsShowPoint(form.isShowPoint)
//     setting.updateIsShowLable(form.isShowLabel)
//     setting.updateIsShowBillboard(form.isShowBillboard)
//     setting.changeUpdateIntervalCount(form.updateIntervalCount)
//     setting.updateMoveRandomMax(form.moveRandomMax)
//     setting.updateMoveRandomMin(form.moveRandomMin)
//     setting.updateIsShowFxaa(form.isShowFxaa)
//
//     pointCollection.removeAll()
//     labelCollection.removeAll()
//     billboardCollection.removeAll()
//     genPrimitive(mountedViewer.scene)
//     mountedViewer.scene.postProcessStages.fxaa.enabled = setting.isShowFxaa;
//
//     ElMessage({
//         message: '更新成功',
//         type: 'success',
//         plain: true,
//     })
//     drawer.value = false
//
//
// }
function handleUpdateSetting(){}

</script>

<template>

    <div class="setting_box">
        <el-button type="primary" size="small" @click="handleOpenSetting">
            <el-icon>
                <Setting/>
            </el-icon>
        </el-button>
    </div>

    <el-drawer
      v-model="drawer"
      title="设置"
    >
        <el-form :model="form" label-width="auto" style="max-width: 600px" @submit.prevent="handleUpdateSetting">
            <el-form-item label="抗锯齿：">
                <el-switch v-model="form.isShowFxaa"/>
            </el-form-item>
            <el-form-item label="Primitive数量：">
                <el-input-number :min="0" v-model="form.primitiveCount"/>
            </el-form-item>
            <el-form-item label="显示point：">
                <el-switch v-model="form.isShowPoint"/>
            </el-form-item>
            <el-form-item label="显示label：">
                <el-switch v-model="form.isShowLabel"/>
            </el-form-item>
            <el-form-item label="显示billboard：">
                <el-switch v-model="form.isShowBillboard"/>
            </el-form-item>

            <el-form-item label="间隔更新频率：">
                <el-input-number :min="1" :max="form.primitiveCount" v-model="form.updateIntervalCount"/>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" native-type="submit">更新</el-button>
                <el-button @click="drawer = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

    <div class="cesium_container" ref="cesium_container"></div>

</template>

<style scoped lang="scss">

.setting_box {
    position: fixed;
    left: 30px;
    top: 30px;
    z-index: 9;
}
</style>
